<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<style type="text/css">
		* {
		    padding: 0px;
		    margin: 0px;
		    list-style: none;
		}
		img{
			width: 250px;
			height: 250px;
		}
		
		td{
			font-size: 20px;
			font-weight: 40px;
			width: 200px;
			text-align: center;
		}
		.nav {
		    height: 50px;
		    background: crimson;
		}
		
		.nav>li {
		    color: white;
		    float: left;
		    line-height: 50px;
		    padding: 0px 30px;
		    position: relative;
		}
		
		
		li {
		    position: relative;
		    text-align: center;
		}
		
		.nav>li:hover {
		    background: blue;
		}
		
		.nav ul {
		    background: green;
		    width: 100px;
		    position: absolute;
		    left: 0px;
		    opacity: 0;
		    transform: rotate(0deg) scale(.5);
		    transition: .2s;
		}
		
		li li:hover {
		    background: yellow;
		}
		
		.nav>li:hover ul {
		    opacity: 1;
		    transform: rotate(360deg) scale(1);
		}
		
		li::after {
		    content: "";
		    position: absolute;
		    width: 0;
		    height: 5px;
		    background: pink;
		    bottom: 10px;
		    left: 50%;
		    transform: translate(-50%, 0);
		    transition: 1s;
		}
		
		li:hover::after {
		    width: 80%;
			body {
				font-size: 12px;
				line-height: 25px;
			}
 
			table {
				border-top: solid 1px #666666;
				border-left: solid 1px #666666;
			}
 
			td {
				text-align: center;
				border-right: solid 1px #666666;
				border-bottom: solid 1px #666666;
			}
 
			.left {
				text-align: left;
				padding-left: 10px;
			}
 
			#photo {
				border: solid 1px #0066CC;
				width: 200px;
				text-align: center;
				z-index: 2;
				position: absolute;
				display: none;
				top: 50px;
				left: 50px;
				background-color: #ffffff;
			}
 
			#big {
 
				width: 200px;
			}
 
			h1 {
				text-align: center;
			}
 
			table {
				margin: 0 auto;
				width: 100%;
				border: 2px solid #aaa;
				border-collapse: collapse;
			}
 
			table th,
			table td {
				border: 2px solid #aaa;
				padding: 5px;
			}
 
			th {
				background-color: #eee;
			}
			.id{
				font-size: 10px;
			}
		</style>
	</head>
	<body>
 
         <ul class="nav">
             <li><a href="index.html">首页</a></li>
         </ul> 
      
		<table style="width: 100%;" cellspacing="0" cellpadding="0" >
			<tr>
				<td>商品图片</td>
				<td>商品名称</td>
				<td >商品价格</td>
				<td>操作</td>
		 </tr>
		 <tr>
		 	<td>
		 		<img src="img/e1.jpg" />
		 	</td>
		 	<td class="left">剧本游戏</td>
		 	<td class="sum">66.60元</td>
		 	<td align="center">
		 		<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
		 	</td>
		 </tr>
			<tr>
		 	<td >
				<img src="img/e2.jpg"/>
				</td>
				<td class="left">Excel应用大全</td>
				<td class="sum">139.00元</td>
				<td>
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
			<tr>
				<td>
					<img src="img/e3.jpg"/>
				</td>
				<td class="left">历史的温度7</td>
				<td class="sum">68.00元</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
			<tr>
				<td>
					<img src="img/e4.jpg"/>
				</td>
				<td class="left">黑暗中的谋杀</td>
				<td class="sum">15.00元</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
		 <tr>
		 	<td>
		 		<img src="img/e5.jpg"/>
		 	</td>
		 	<td class="left">文艺欣赏七论</td>
		 	<td class="sum">53.90元</td>
		 	<td align="center">
		 		<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
		 	</td>
		 </tr>
			<tr>
				<td>
					<img src="img/e6.jpg"/>
				</td>
				<td class="left">流畅的Python</td>
				<td class="sum">199.80元</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
		</table>
		<div id="photo" onmouseout="hidden()" onmousemove="shows()"></div>
 
		<h1>购物车</h1>
		<table  id="a">
			<thead>
				<tr>
					<th>商品</th>
					<th>单价（元）</th>
					<th>数量</th>
					<th>金额（元）</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="goods">
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="right">总计</td>
					<td id="total"></td>
					<td><button onclick="tk(this)">购买</button></td>
				</tr>
			</tfoot>
			
		</table>
		
 
		<script>
			function show(image, event) {
				var x;
				var y;
				document.getElementById("photo").style.display = "block";
				x = parseInt(event.clientX) + parseInt(document.documentElement.scrollLeft);
				y = parseInt(event.clientY) + parseInt(document.documentElement.scrollTop);
				document.getElementById("photo").style.top = y + "px";
				document.getElementById("photo").style.left = x + "px";
				document.getElementById("big").src = "images/" + image;
 
			}
 
			function shows() {
				document.getElementById("photo").style.display = "block";
			}
 
			function hidden() {
				document.getElementById("photo").style.display = "none";
			}
			window.onscroll = "show()";
 
			//------------------------------------------------------------------------------------------------				
			var map = new Map(); 
 
			function add_shoppingcart(btn) { 
				var ntr = document.createElement("tr");
				var tr = btn.parentNode.parentNode; 
				var tds = tr.children;
				var name = tds[0].innerHTML;
				var price = tds[2].innerHTML;
				console.log("name:" + name + ",price:" + price);
 
				if (map.has(name)) {

					var tr1 = map.get(name);     
					var btn1 = tr1.getElementsByTagName("button")[1];
					jia(btn1);
				} else {
					ntr.innerHTML =
						`
						<td style="text-align:center;">${name}</td>
						 <td style="text-align:center;">${price}</td>
						<td style="text-align:center;">
						<button onclick="jian(this)">-</button>
						<input type="text" value="1" size="1" />
						<button id="btn1" onclick="jia(this)">+</button>
						</td>
						<td>${price}</td>
						<td style="text-align:center;"><button onclick="del(this)">X</buttton></td>`;
					map.set(name, ntr);
					var tbody = document.getElementById("goods");
					tbody.appendChild(ntr);
					sum();
				}
			}
 
			function del(btn) {
				var tr = btn.parentNode.parentNode;
				tr.remove(); 
				var tr = btn.parentNode.parentNode; 
				var tds = tr.children;
				var name = tds[1].innerHTML;
				map.delete(name); 
				sum();
			}
 
			function jian(btn) {
				var inpt = btn.nextElementSibling;
				var amount = inpt.value;
				if (amount <= 1) {
					return;
				} else {
					inpt.value = --amount;
					var trs = btn.parentNode.parentNode;
					console.log(trs);
					var price = parseInt(trs.children[1].innerHTML);
					trs.children[3].innerHTML = price * amount;
					sum();
				}
			}
 
			function jia(btn) { 
				var inpt = btn.previousElementSibling;
				var amount = inpt.value;
				inpt.value = ++amount; 
				var td = btn.parentNode.previousElementSibling;
				var price = parseInt(td.innerHTML); 
				var rtd = btn.parentNode.nextElementSibling;
				rtd.innerHTML = price * amount;
				sum();
			}
 
			function sum() {
				var tbody = document.getElementById("goods");
				var trs = tbody.children; 
				var total = 0; 
				for (i = 0; i < trs.length; i++) { 
					var price = trs[i].children[3].innerHTML;
					total = total + parseInt(price);
				}
				var t = document.getElementById("total");
				t.innerHTML = total;
			}
			
			function tk(btn){
         
		 
			}
			</script>
	</body>
</html>